<template>
	<view class="history">
		<view class="title">
			历史任务
		</view>
		<u-tabs-swiper class="tabs" ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
			active-color="#004FFF" inactive-color="#999999" bg-color="#efefef" swiperWidth="750"></u-tabs-swiper>
		<view class="team-list">
			<view class="card" @click="goDetail(item)" v-for="(item,index) in list" :key="index">
				<view class="line">
					<view class="orderNum">
						{{ item.StoreageTaskSn }}
					</view>
					<view class="">
						<u-tag text="可编辑" type="info" mode="light" v-if="item.StoreageTaskState==0" />
						<u-tag text="审批中" type="primary" mode="light" v-if="item.StoreageTaskState==4" />
						<u-tag text="已通过" type="success " mode="light" v-if="item.StoreageTaskState==1" />
						<u-tag text="已打款" type="warning " mode="light" v-if="item.StoreageTaskState==3" />
						<u-tag text="已拒绝" type="error " mode="light" v-if="item.StoreageTaskState==2" />
					</view>
				</view>
				<view class="line lines">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>创建日期
					</view>
					<view class="">
						{{ item.CreateDateTime }}
					</view>
				</view>
				<view class="line lines">
					<view class="line-title">
						<u-icon name="order" color="#181B1F"></u-icon>收货数量
					</view>
					<view class="line-title">
						{{ item.PackageCount }}
					</view>
				</view>
				<view class="line lines">
					<view class="line-title">
						<u-icon name="red-packet" color="#181B1F"></u-icon>
						支付金额
					</view>
					<view>
						₱ {{ item.TaskMoney }}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="flag" style="text-align: center;">
			<view class="">已经到底啦~</view>
		</view>
		<view class="" v-if="flag1" style="text-align: center;">
			<view class="">没有~</view>
		</view>
		<tabbar :current='3'></tabbar>
	</view>
</template>

<script>
	import tabbar from '../components/tabbar.vue'
	import {
		oldTask
	} from '@/api/all.js';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				tabs: [{
						name: '所有任务',

					}, {
						name: '审批中',
					}, {
						name: '已通过',
					},
					{
						name: '已打款',
					},
					{
						name: '已拒绝',
					}
				],
				current: 0,
				none: false,
				pageIndex: 1,
				pageSize: 10,
				list: [],
				flag:false,
				flag1:false,
				state:55,
				pages:'',
				Total:''
			}
		},
		mounted() {
			this.getOldTask();
		},
		onPullDownRefresh() {
			var that = this
			that.page = 1
			this.article()
		},
		onReachBottom() { //滚动到底翻页
		if(this.pageIndex >= this.pages) return ;
			var that = this
			var pageIndex = that.pageIndex
			that.pageIndex = ++pageIndex
			this.getOldTask()
			console.log(that.pageIndex)
		},
		methods: {
			tabsChange(e) {
				console.log(e);
				this.current = e;
				this.list={};
				this.pageIndex=1
				if(this.current==0){
					this.state=55;
				}
				if(this.current==1){
					this.state=4;
				}
				if(this.current==2){
					this.state=1;
				}
				if(this.current==3){
					this.state=3;
				}
				if(this.current==4){
					this.state=2;
				}
				this.getOldTask();
				// this.getData();
			},
			goDetail(item) {
				console.log(item)
				let taskId = item.StoreageTaskId
				uni.navigateTo({
					url: `/pages/historicalTasks/detail?taskId=${taskId}`
				})
				// uni.navigateTo({
				// 	url: './detail'
				// });
			},
			getOldTask() {
				let postdata = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					state:this.state
				};
				oldTask(postdata).then(res => {
					if (res.statusCode == 200) {
						this.pages=res.data.PageCount;
						if(this.pageIndex==1){
							this.list = res.data.Data;
							if(this.list.length>=res.data.Total){
								this.flag1 = true
							}
						}else{
							this.list=this.list.concat(res.data.Data)
						}
						if(this.list.length>=res.data.Total){
							this.flag1 = true
						}
						console.log(this.list)
					}
				})
			},
			// 追加列表
			async getOldTask1() {
				var that = this
				let postdata = {
					pageIndex: that.pageIndex,
					pageSize: that.pageSize
				};
				oldTask(postdata).then(res => {
					if (res.statusCode == 200) {
						this.list = [...this.list, ...res.data.Data]
						console.log(this.list)
					}
				})
				if (res.data.Data.length == 0) {
					that.flag = true
				}
			},

		}
	}
</script>

<style lang="scss">
	.history {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		background: #efefef;
		overflow: auto;

		.tabs {
			padding: 0 48rpx;
		}

		.title {
			font-size: 24px;
			color: #10275A;
			margin-top: 100rpx;
			padding: 0 48rpx;
		}

		.team-list {
			margin-top: 20rpx;
		}

		.card {
			background-color: #fff;
			margin: 0 48rpx;
			padding: 32rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.orderNum {
					font-size: 16px;
					font-weight: 500;
				}

				.line-title {
					display: flex;

				}
			}
			.lines{
				line-height: 40rpx;
			}
		}
	}
</style>
